<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true">添 加</el-button>
        <el-dialog title="商品信息" :visible.sync="dialogFormVisible" @close="closeDialog" width="50%">
            <el-steps :active="step">
                <el-step title="基本信息"></el-step>
                <el-step title="商品详情"></el-step>
                <el-step title="规格参数"></el-step>
                <el-step title="SKU属性"></el-step>
                <el-step title="保存商品"></el-step>
            </el-steps>
            <!--使用自定义组件-->
            <GoodsBasic v-if="step === 0" :form="form"></GoodsBasic>
            <GoodsDetails v-if="step === 1" :form="form"></GoodsDetails>
            <GoodsSpec v-if="step === 2" :form="form"></GoodsSpec>
            <GoodsSku v-if="step === 3" :form="form"></GoodsSku>
            <GoodsSave v-if="step === 4" :form="form"></GoodsSave>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="step > 0? step-- : step" v-if="step > 0">上一页</el-button>
                <el-button type="primary" @click="step < 4? step++ : step" v-if="step < 4">下一页</el-button>
                <el-button type="primary"  v-if="step === 4" @click="saveGoods">保  存</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="标题"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="子标题"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" v-if="scope.row.subTitle.length <= 20">{{ scope.row.subTitle }}</span>
                    <span style="margin-left: 10px" v-else>{{ scope.row.subTitle.substr(0,20) }}...</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="分类"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.category }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="品牌"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.brand }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"
                            @change="searchKey"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini">编辑
                    </el-button>
                    <el-button
                            @click="deleteSpu(scope.$index,scope.row)"
                            size="mini"
                            type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page="current"
                @current-change="loadPage">
        </el-pagination>
    </div>
</template>

<script>
    //引入自定义组件
    import GoodsSave from "../../components/GoodsSave";
    import GoodsBasic from "../../components/GoodsBasic";
    import GoodsDetails from "../../components/GoodsDetails";
    import GoodsSku from "../../components/GoodsSku";
    import GoodsSpec from "../../components/GoodsSpec";

    export default {
        name: "Goods",
        //声明组件
        components:{
            GoodsSpec,GoodsSku,GoodsDetails,GoodsBasic,GoodsSave
        },
        data() {
            return {
                tableData: [],
                total: 0,
                current: 0,
                dialogFormVisible:false,
                search:"",//搜索关键字
                lastSearch:"", //上次搜索的关键字
                //步骤
                step:0,
                //表单对象
                initForm:{spuId:0,title:"",subTitle:"",cid1:0,cid2:0,cid3:0,brandId:0,saleable:0,
                    spuDetails:{description:"",specifications:"",specTemplate:"",packingList:"",afterService:""},
                    //sku特有的规格
                    skuSpecs:[],
                    //选择的sku数组
                    skus:[]
                },
                form:{}
            }
        },
        methods: {
            loadPage(page) {
                this.$http.get("http://api.blb.com/api/search-api/goods/page/" + page)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.tableData = res.data.data.records;
                            this.total = res.data.data.total;
                            this.current = res.data.data.current;
                        }
                    });
            },
            //搜索
            searchKey(){
                this.$http.get("http://api.blb.com/api/search-api/goods/page/"
                    + this.current+"?key="+this.search)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.tableData = res.data.data.records;
                            this.total = res.data.data.total;
                            this.current = res.data.data.current;
                            if(this.lastSearch != this.search){
                                this.current = 0;
                            }
                            this.lastSearch = this.search + "";
                        }
                    });
            },
            saveGoods(){
                //从skuSpecs整理出spec_template
                let temp = {};
                this.form.skuSpecs.forEach(({k,selected})=>{
                    temp[k] = selected;
                });
                this.form.spuDetails.specTemplate = temp;
                //将skus中的images\title\ownSpec整理出来
                //筛选出启用状态的sku，再对sku进行转换
                let skus = this.form.skus.filter(s => s.enable)
                    //... 是剩下的属性
                    .map(({indexes,images,enable,price,stock,...rest}) => {
                        //计算出title 将rest部分的值用空格连接起来
                        let title = this.form.title + Object.values(rest).join(" ");
                        //如果images数组不为空，就用，连接
                        images = !images ? '' : images.join(",");
                        //处理ownSpec
                        let ownSpec = JSON.stringify(rest);
                        //返回转换后的结果
                        return {title,indexes,images,enable,price,stock,ownSpec};
                    });
                this.form.skus = skus;
                this.form.spuDetails.specifications = JSON.stringify(this.form.spuDetails.specifications);
                this.form.spuDetails.specTemplate = JSON.stringify(this.form.spuDetails.specTemplate);
                console.log(JSON.stringify(this.form));
                this.$http.post("http://api.blb.com/api/goods-api/spu",this.form)
                    .then(res => {
                        if(res.data.code === 1){
                            this.$message.info("添加成功");
                        }
                    });
                this.dialogFormVisible = false;
            },
            closeDialog(){
                this.form = JSON.parse(JSON.stringify(this.initForm));
                this.step = 0;
            },
            deleteSpu(index,row){
                this.$http.delete("http://api.blb.com/api/goods-api/spu/"+row.id)
                    .then(res => {
                        if(res.data.code == 1){
                            this.$message.info("删除成功");
                            this.tableData.splice(index,1);
                        }
                    });
            }
        },
        mounted() {
            this.loadPage(1);
            this.form = JSON.parse(JSON.stringify(this.initForm));
        }
    }
</script>

<style scoped>

</style>